<script setup>
import { ref , watch} from 'vue'
const totalCount = ref(100)
const msg=ref('hello')
// 侦听对象
const person=ref({
  name:'张三',
  age:20
})
/**
 * 侦听器第三个参数：配置对象
 *   { immediate: true }               立即触发回调
 *   { deep: true }                    深度侦听对象
 *   { immediate: true, deep: true }   立即触发回调，并且开启深度侦听
 */
// 侦听一个响应式数据
watch(totalCount, (newValue, oldValue) => {
  console.log('totalCount',{newValue, oldValue});
},{immediate:true})
// 支持侦听多个值
// watch([totalCount, msg], (newValue, oldValue) => {
//   console.log('totalCount',{newValue, oldValue});
// })
// 如果侦听对象，需要开启深度侦听，参数3 添加 { deep: true }
watch(person,(value)=>{
  console.log('person',value)
},{immediate: true,deep:true})

</script>
<template>
  <!-- 结构 template 中会自动解包，所以无需写 .value-->
<h1>{{ totalCount }}</h1>
<button @click="totalCount++">点击累加</button>
<button @click="msg+='~'">{{ msg }}</button>
<p>{{ person }}</p>
<button @click="person.age++" >点击加年龄</button>

</template>
<style></style>
